<style media="screen">
  .head-container {
    position: relative;
    padding: 10px 0 14px;
    border-bottom: 1px solid #E3E3E5;
  }

  .head-container .mes {
    overflow: hidden;
    margin-right: 10px;
    float: left;
  }

  .head-container .mes p {
    font-size: 12px;
    color: #CFCFCF;
    margin-bottom: 6px;
  }

  .head-container .mes input {
    width: 260px;
    height: 34px;
  }

  .head-container .flow {
    float: left;
    margin-right: 10px;
  }

  .head-container .flow p {
    font-size: 12px;
    color: #CFCFCF;
    margin-bottom: 6px;
  }

  .head-container .flow .flow-select {
    width: 140px;
    height: 34px;
  }

  .head-container .button-group {
    padding-top: 23px;
  }

  .config-table-wrap:hover {
    overflow-x: scroll;
  }

  .extension-wrap:hover .table-type-wrap {
    display: block;
  }

  .table-type-wrap {
    width: 102px;
    display: none;
    position: absolute;
    right: 20px;
    top: -30px;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 0 4px rgba(214, 214, 214, .75);
  }

  .table-type-wrap:before {
    display: block;
    content: '';
    border-width: 8px 8px 8px 8px;
    border-style: solid;
    border-color: transparent transparent transparent #fff;
    position: absolute;
    left: 102px;
    top: 40%;
  }

  .table-type-wrap li {
    padding: 0 6px;
    height: 24px;
    line-height: 24px;
    color: #5e67a5;
    cursor: pointer;
    text-align: left;
  }

  .table-type-wrap li.active {
    background-color: #f2f2f2;
  }

  .init-hover:hover .init-tips1,
  .init-hover:hover .init-tips2 {
    display: block;
  }

  .init-tips1 {
    display: none;
    width: 240px;
    position: absolute;
    left: 50%;
    top: 28px;
    background: #fff;
    filter: drop-shadow(0 0 5px rgba(0, 0, 0, .2));
    transform: translate(-50%, 0);
    padding: 10px;
    border-radius: 4px;
    word-wrap: break-word !important;
    white-space: normal;
    line-height: 18px;
    z-index: 999;
  }

  .init-tips1:before {
    content: '';
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    top: -16px;
    width: 0;
    height: 0;
    border-width: 8px;
    border-style: solid;
    border-color: transparent transparent #fff transparent;
  }

  .init-tips2 {
    display: none;
    width: 240px;
    position: absolute;
    right: 100%;
    top: 50%;
    background: #fff;
    filter: drop-shadow(0 0 5px rgba(0, 0, 0, .2));
    transform: translate(0, -50%);
    padding: 0 10px;
    border-radius: 4px;
    word-wrap: break-word !important;
    white-space: normal;
    line-height: 33px;
    z-index: 999;
  }

  .init-tips2:before {
    content: '';
    position: absolute;
    right: -14px;
    transform: translate(0, -50%);
    top: 50%;
    width: 0;
    height: 0;
    border-width: 8px;
    border-style: solid;
    border-color: transparent transparent transparent #fff;
  }

  .text-hover-top {
    position: absolute;
    width: 200px;
    padding: 15px;
    background-color: #fff;
    z-index: 9;
    color: #999;
    filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.2));
    border-radius: 4px;
    line-height: 24px;
    word-wrap: break-word
  }

  .text-hover-top::before {
    content: '';
    position: absolute;
    left: 50%;
    top: -10px;
    width: 0;
    height: 0;
    border-width: 0 10px 10px;
    border-style: solid;
    border-color: transparent transparent #fff;
    transform: translate(-50%, 0);
  }
</style>

<section class="pl-24 pr-24" id="businessMange">
  <div class="upload-filess"></div>

  <hl-page-header title="我的线索">
    <hl-button type="outline" @on-click="createSj" v-if="quanxian.indexOf('c146') > -1">新建线索</hl-button>
    <hl-button type="outline" @on-click="importExcl" v-if="quanxian.indexOf('c146') > -1">导入线索</hl-button>
  </hl-page-header>

  <div class="head-container clearfix">
    <div class="clearfix">
      <div class="mes">
        <p>信息搜索</p>
        <div class="global_search">
          <span class="icon-Gm-search"></span>
          <input autocomplete="off" type="text" class="global_ipt_text" placeholder="主题/目标客户/联系人/联系电话/创建人" v-model="keyword" />
        </div>
      </div>
      <div class="flow">
        <p>线索来源</p>
        <hl-select :data="source" v-model="sourceCode" width="120" @on-change="setSourceCode"></hl-select>
      </div>
      <div class="flow">
        <p>渠道分类</p>
        <hl-select :data="channelType" v-model="channerCode" width="120" @on-change="setSJCHANNELCATE"></hl-select>
      </div>
      <div class="flow">
        <p>渠道名称</p>
        <hl-select :data="channerName" v-model="channerNameCode" width="120" @on-change="setChannerNameCode"></hl-select>
      </div>

      <div class="button-group" v-show="!isExtenseFlag">
        <hl-button @on-click="search" size="mini">查询</hl-button>
        <hl-button @on-click="resetData" size="mini">重置</hl-button>
      </div>

      <div class="global_open_sign" @click="isExtenseFlag = !isExtenseFlag">
        <span v-if="!isExtenseFlag">更多筛选项</span>
        <span v-if="isExtenseFlag">收起筛选项</span>
      </div>

    </div>
    <div class="mt-10" v-show="isExtenseFlag">
			<div class="flow">
			  <p>所属行业</p>
			  <hl-select :data="industryType" v-model="selectedIndustryType" width="120" ></hl-select>
			</div>
      <div class="flow">
        <p>跟进时间</p>
        <div class="pull-right dy-flex" style="align-items: center">
          <web-calendar v-model="secondRowBeginDate" :afterdate="secondRowEndDate" tips="起始日期" width="158"></web-calendar>
          <span style="width:20px;" class="text-center line-height-34 inline">-</span>
          <web-calendar v-model="secondRowEndDate" :beforedate="secondRowBeginDate" tips="截止日期" width="158"></web-calendar>
        </div>
      </div>
      <div class="button-group">
        <hl-button @on-click="search" size="mini">查询</hl-button>
        <hl-button @on-click="resetData" size="mini">重置</hl-button>
      </div>
    </div>
  </div>

  <div class="global_screening_container">
    <hl-checkbox-button :data="listMenu" v-model="selectedListMenuCode" @on-click="selectMenuList" merge></hl-checkbox-button>
    <span class="global_refresh_icon icon-uniE94B" @click="resetTabbar" style="left:486px"></span>
  </div>

  <!-- 开始 -->
  <section class="config-table-container global_table" style="margin:0 0 10px 0;border:1px solid #E5E5E5;">

    <!-- 内容表格 -->
    <div class="config-table-wrap clearfix" :class="{'config-table-scroll':isScroll}" ref="scrollLeft" style="margin-right: 124px;">
      <div :style="tbTitleWidth">
        <div class="config-table-title-wrap dy-flex">
          <div :style="{width: isNaN(leftWidth) ? '50%' : leftWidth + 'px'}" class="dy-flex">
            <!-- 完整 -->
            <div style="padding:0px;" class="config-table-title-item global_table_title" v-if="configType == 'WZ'" @click=" sortBySTTime(item)" :style="{'width': item.styleWidth + 'px', 'text-align': item.value == 'memo' ? 'left' : 'center'}" v-for="(item,index) in leftTableArr">
              <span>{{ item.name }}</span>
              <span v-if="dateTimeUpdate.indexOf(item.value) > -1 && indexTime < 1" v-for="(time,indexTime) in dateTimeUpdate" :class="{'icon-Gm-sort-default': isActiveCode != item.value, 'icon-Gm-sort-ascending': isActiveCode == item.value && orders == 'ASC', 'icon-Gm-sort-descending': isActiveCode == item.value && orders == 'DESC'}">
  							<span class="path1"></span><i class="path2"></i>
              </span>
            </div>
            <!-- 简单 -->
            <div style="padding:0px;" class="config-table-title-item global_table_title" v-if="configType == 'JD' && item.baseFlag == 'Y'" @click=" sortBySTTime(item)" :style="{'width': item.styleWidth + 'px', 'text-align': item.value == 'memo' ? 'left' : 'center'}"
              v-for="(item,index) in leftTableArr">
              <span>{{ item.name }}</span>
              <span v-if="dateTimeUpdate.indexOf(item.value) > -1 && indexTime < 1" v-for="(time,indexTime) in dateTimeUpdate" :class="{'icon-Gm-sort-default': isActiveCode != item.value, 'icon-Gm-sort-ascending': isActiveCode == item.value && orders == 'ASC', 'icon-Gm-sort-descending': isActiveCode == item.value && orders == 'DESC'}">
  							<span class="path1"></span><i class="path2"></i>
              </span>
            </div>
            <!-- //配置 -->
            <div style="padding:0px;" :class="'dy-fx-'+item.flex" class="config-table-title-item global_table_title" v-if="configType == 'PZ' && item.customShowFlag == 'Y'" @click=" sortBySTTime(item)" :style="{'text-align': item.value == 'memo' ? 'left' : 'center'}"
              v-for="(item,index) in leftTableArr">
              <span>{{ item.customDisplayName ? item.customDisplayName : item.name }}</span>
              <span v-if="dateTimeUpdate.indexOf(item.value) > -1 && indexTime < 1" v-for="(time,indexTime) in dateTimeUpdate" :class="{'icon-Gm-sort-default': isActiveCode != item.value, 'icon-Gm-sort-ascending': isActiveCode == item.value && orders == 'ASC', 'icon-Gm-sort-descending': isActiveCode == item.value && orders == 'DESC'}">
  							<span class="path1"></span><i class="path2"></i>
              </span>
            </div>
          </div>
          <div :style="{width: isNaN(rightWidth) ? '50%' : rightWidth + 'px'}" class="dy-flex">
            <!-- 完整 -->
            <div style="padding:0px;" :class="'dy-fx-'+item.flex" class="config-table-title-item global_table_title" v-if="configType == 'WZ'" @click=" sortBySTTime(item)" :style="{'width': item.styleWidth + 'px', 'text-align': item.value == 'memo' ? 'left' : 'center'}"
              v-for="(item,index) in rightTableArr">
              <span>{{ item.name }}</span>
              <span v-if="dateTimeUpdate.indexOf(item.value) > -1 && indexTime < 1" v-for="(time,indexTime) in dateTimeUpdate" :class="{'icon-Gm-sort-default': isActiveCode != item.value, 'icon-Gm-sort-ascending': isActiveCode == item.value && orders == 'ASC', 'icon-Gm-sort-descending': isActiveCode == item.value && orders == 'DESC'}">
  							<span class="path1"></span><i class="path2"></i>
              </span>
            </div>
            <!-- 简单 -->
            <div style="padding:0px;" :class="'dy-fx-'+item.flex" class="config-table-title-item global_table_title" v-if="configType == 'JD' && item.baseFlag == 'Y'" @click=" sortBySTTime(item)" :style="{'width': item.styleWidth + 'px', 'text-align': item.value == 'memo' ? 'left' : 'center'}"
              v-for="(item,index) in rightTableArr">
              <span>{{ item.name }}</span>
              <span v-if="dateTimeUpdate.indexOf(item.value) > -1 && indexTime < 1" v-for="(time,indexTime) in dateTimeUpdate" :class="{'icon-Gm-sort-default': isActiveCode != item.value, 'icon-Gm-sort-ascending': isActiveCode == item.value && orders == 'ASC', 'icon-Gm-sort-descending': isActiveCode == item.value && orders == 'DESC'}">
  							<span class="path1"></span><i class="path2"></i>
              </span>
            </div>
            <!-- //配置 -->
            <div style="padding:0px;" :class="'dy-fx-'+item.flex" class="config-table-title-item global_table_title" v-if="configType == 'PZ' && item.customShowFlag == 'Y'" @click=" sortBySTTime(item)" :style="{'text-align': item.value == 'memo' ? 'left' : 'center'}"
              v-for="(item,index) in rightTableArr">
              <span>{{ item.customDisplayName ? item.customDisplayName : item.name }}</span>
              <span v-if="dateTimeUpdate.indexOf(item.value) > -1 && indexTime < 1" v-for="(time,indexTime) in dateTimeUpdate" :class="{'icon-Gm-sort-default': isActiveCode != item.value, 'icon-Gm-sort-ascending': isActiveCode == item.value && orders == 'ASC', 'icon-Gm-sort-descending': isActiveCode == item.value && orders == 'DESC'}">
  							<span class="path1"></span><i class="path2"></i>
              </span>
            </div>
          </div>
        </div>

        <div class="config-table-content-wrap" style="overflow: initial;">
          <ul v-for="(item,index) in listObj.biz_oppts" class="global_table_item clearfix" style="overflow: initial;height: auto;">
            <li style="overflow: initial;" :style="{height: item.followupRecords.length ? (item.followupRecords.length*40)+'px' : '40px', width: isNaN(leftWidth) ? '50%' : leftWidth + 'px'}">
              <div class="dy-flex" :class="{'border-t': index0 > 0}" v-for="(item0, index0) in item.followupRecords">
                <!-- 完整 -->
                <div class="pull-left relative" :style="{'width':item1.styleWidth + 'px'}" v-if="configType == 'WZ'" v-for="(item1,index1) in leftTableArr">
                  <span class="ellipsis-1" v-if="item1.value != 'memo'">{{item0[item1.value] | formatUndefinedFB}}</span>
                  <span v-if="item1.value == 'memo'" style="display: block;text-align: left;float: left;">{{ item0.memo ? item0.memo.length > 12 ? item0.memo.substr(0,12) + '...' : item0.memo : '--' }}</span>
                  <div class="init-hover absolute" @mouseenter="hoverText($event, item0.memo)" @mouseleave="mouseleaveOut" style="right: 0;top: 0;" v-if="item1.value == 'memo'" v-show="item0.memo && item0.memo.length > 12">
                    <a href="javascript:;">详情</a>
                  </div>
                </div>
                <!-- //简单 -->
                <div class="pull-left clearfix relative" :style="{'width':item1.styleWidth + 'px'}" v-if="configType == 'JD' && item1.baseFlag == 'Y'" v-for="(item1,index1) in leftTableArr">
                  <span class="ellipsis-1" v-if="item1.value != 'memo'">{{item0[item1.value] | formatUndefinedFB}}</span>
                  <span v-if="item1.value == 'memo'" @mouseenter="hoverText($event, item0.memo)" @mouseleave="mouseleaveOut" style="display: block;text-align: left;float: left;">{{ item0.memo ? item0.memo.length > 12 ? item0.memo.substr(0,12) + '...' : item0.memo : '--' }}</span>
                  <div class="init-hover absolute" style="right: 0;top: 0;" v-if="item1.value == 'memo'" v-show="item0.memo && item0.memo.length > 12">
                    <a href="javascript:;">详情</a>
                  </div>
                </div>
                <!-- //自定义 -->
                <div class="pull-left relative clearfix" :class="'dy-fx-'+item1.flex" v-if="configType == 'PZ' && item1.customShowFlag == 'Y'" v-for="(item1,index1) in leftTableArr">
                  <span class="ellipsis-1" v-if="item1.value != 'memo'">{{item0[item1.value] | formatUndefinedFB}}</span>
                  <span v-if="item1.value == 'memo'" style="display: block;text-align: left;float: left;">{{ item0.memo ? item0.memo.length > 12 ? item0.memo.substr(0,12) + '...' : item0.memo : '--' }}</span>
                  <div class="init-hover absolute" @mouseenter="hoverText($event, item0.memo)" @mouseleave="mouseleaveOut" style="right: 0;top: 0;" v-if="item1.value == 'memo'" v-show="item0.memo && item0.memo.length > 12">
                    <a href="javascript:;">详情</a>
                  </div>
                </div>
              </div>
            </li>
            <li class="border-l" style="overflow: initial;display: flex;align-items: center;" :style="{width: isNaN(rightWidth) ? '50%' : rightWidth + 'px', height: item.followupRecords.length ? (item.followupRecords.length*40)+'px' : '40px'}">
              <div class="dy-flex" style="width: 100%;">
                <!-- //完整 -->
                <div class="pull-left ellipsis-1" :class="'dy-fx-'+item1.flex" v-if="configType == 'WZ'" v-for="(item1,index1) in rightTableArr">
                  <span>{{item[item1.value] | formatUndefinedFB}}</span>
                </div>
                <!-- //简单 -->
                <div class="pull-left ellipsis-1 clearfix" :class="'dy-fx-'+item1.flex" v-if="configType == 'JD' && item1.baseFlag == 'Y'" v-for="(item1,index1) in rightTableArr">
                  <span>{{item[item1.value] | formatUndefinedFB}}</span>
                </div>
                <!-- //自定义 -->
                <div class="pull-left ellipsis-1 clearfix" :class="'dy-fx-'+item1.flex" v-if="configType == 'PZ' && item1.customShowFlag == 'Y'" v-for="(item1,index1) in rightTableArr">
                  <span>{{item[item1.value] | formatUndefinedFB}}</span>
                </div>
              </div>
        </div>
        </li>
        </ul>
      </div>
    </div>
    </div>

    <!-- 操作 -->
    <div class="config-table-operate-wrap">
      <div class="title" style="backgroundColor:#F0F2FF;height:40px;">
        <div class="name">操作</div>
        <div class="extension-wrap">
          <i class="icon-predict-more extension-icon"></i>
        </div>
        <ul class="table-type-wrap">
          <li @click="selectTableType('JD')" :class="{'active': configType == 'JD' }">简单表格</li>
          <li @click="selectTableType('WZ')" :class="{'active': configType == 'WZ' }">完整表格</li>
          <li @click="selectTableType('PZ')" :class="{'active': configType == 'PZ' }">自定义表格<span class="icon icon-Gm-edit" @click="showTableLayer"></span></li>
        </ul>
      </div>
      <ul class="button-group">
        <li v-for="(item,index) in listObj.biz_oppts" class="global_table_item dy-flex" style="height: auto;text-align: center;">
          <div class="dy-flex" style="align-items: center;justify-content: center;width: 100%;" :style="{height: item.followupRecords.length ? (item.followupRecords.length*40)+'px' : '40px'}">
            <a target="_blank" :href="'#/businessDetails?businessId='+item.sjId+'&ddtab=true&page=mySiness'">详情</a>
          </div>
        </li>
      </ul>
    </div>
    <div class="text-hover-top" v-if="texthover" :style="{left:lefthover, top:tophover}">{{textLong}}</div>
  </section>

  <!-- 自定义列表项弹出层 -->
  <div class="pop box-o-shadow config-table-layer" v-show="isShowTableLayer">
    <div class="head-pop font-16"><span>自定义列</span>
      <button class="fw-close absolute close" type="button" @click="closeTableLayer">×</button>
    </div>
    <div class="content-pop">
      <div class="content text-center">
        <ul class="title-wrap">
          <li class="dy-fx-1 text-left">名称</li>
          <li class="dy-fx-2">自定义名称</li>
          <li class="dy-fx-1">状态</li>
        </ul>
        <div class="ctx-wrap" id="sortableTable">
          <ul :class="{ 'active': item.isActive == 'Y' }" v-for="(item,index) in sortTableTitle" @mouseenter="showhighLightTitleItem(item,index)" @mouseleave="removehighLightTitleItem(item,index)">
            <li class="sort-sign" :class="{ 'active':item.isActive == 'Y' }">排序</li>
            <li class="dy-fx-1 name">{{item.name}}</li>
            <li class="dy-fx-2">
              <input type="text" class="form-control" v-model="item.customDisplayName">
            </li>
            <li class="dy-fx-1 ">
              <span class="show-icon " :class="{'icon-Nav-contract-choice':item.customShowFlag == 'Y' , 'icon-uncheck':item.customShowFlag == 'N' }" @click="selectedTitleItem(index)">显示</span>
              <span class="hide-icon " :class="{'icon-Nav-contract-choice':item.customShowFlag == 'N' , 'icon-uncheck':item.customShowFlag == 'Y' }" @click="cancelSelectedTitleItem(index)">隐藏</span>
            </li>
          </ul>

        </div>
      </div>
    </div>
    <div class="fw-button">
      <button type="button" class="fw-submit yes" @click="confirmSubmitTable">确定</button>
      <button type="button" class="fw-submit no" @click="closeTableLayer">取消</button>
    </div>
  </div>

  <!--遮罩-->
  <div class="backdrop" v-if="isShowTableLayer"></div>
  <!-- end -->

  <div class="user-page ptb-10 clearfix">
    <div class="pull-left user-page-num">
      <span class="font-14">共<i>{{listObj.totalCount || '0'}}</i>条记录</span>
      <span>每页<hl-select :data="pageCounts" v-model="pageCount" width="80" @on-change="setMoreNum"></hl-select>条</span>
    </div>
    <div class="pull-right">
      <hl-pagination v-model="currentPage" :total="totalPage" @change="getListData"></hl-pagination>
    </div>
  </div>

  <div class="mark-yuce" v-if="importFlag">
    <div class="yuce-contains" style="width:480px;">
      <div class="title">导入线索</div>
      <div class="close" @click="importExclClose">x</div>
      <div class="yuce-orge">
        <div class="dy-flex line-height-34 pt-15">
          <div class="dy-fx-1">
            <input type="text" class="filename-i form-control bg-fff inline" readonly style="vertical-align: middle;width:348px;" id="exclName">
            <button class="btn s-btn-default" style="vertical-align: middle;" @click="downloadxslc">上传</button>
          </div>
        </div>
        <div class="mt-5">
          <a href="http://file.1hello.cn/excel/导入线索模板.xlsx" download="导入线索模板">下载模板</a>
        </div>
        <div class="text-center dy-flex center-dy">
          <div class="pt-15" v-if="detectionBtn">
            <a class="detection" @click="detectionXslx">检测</a>
          </div>
          <div class="pt-15" v-if="detection">
            <div class="typing_loader"></div>
            数据校验中
          </div>
          <div class="pt-15" v-if="notThrough">
            <div class="icon-Gm-delete-2 pb-10" style="font-size: 24px; color:#fe6e63;"></div>
            检测未通过！
            <p v-if="isShowDownload"><a :href="srcUrl">下载报告</a></p>
          </div>
          <div class="pt-15" v-if="is500">
            <div class="icon-Nav-dispose-complete pb-10" style="font-size: 24px; color:#73c676;"></div>
            存在重复线索，确认继续提交
            <p v-if="isShowDownload"><a :href="srcUrl">下载报告</a></p>
          </div>
          <div class="pt-15" v-if="through && !is500">
            <div class="icon-Nav-dispose-complete pb-10" style="font-size: 24px; color:#73c676;"></div>
            检测通过！
          </div>
        </div>
      </div>
      <div class="orge-footer text-center" v-if="through">
        <button type="button" class="btn n-btn-primary mr-10" style="width:90px;min-width:80px;" @click="submibXslc">确认上传</button>
        <button type="button" class="btn n-btn-outline" @click="importExclClose">取消</button>
      </div>
      <div class="orge-footer text-center" v-if="(!notThrough || notThrough) && !through" style="opacity: 0.5;">
        <button type="button" class="btn n-btn-primary mr-10" style="width:90px;min-width:80px;">确认上传</button>
        <button type="button" class="btn n-btn-outline" @click="importExclClose">取消</button>
      </div>
    </div>
  </div>
</section>
<script src="modules/rent/scripts/mySiness.js" charset="utf-8"></script>

<style>
  .bt-icon1 {
    vertical-align: middle;
  }

  .bt-icon1 .path2:before {
    margin-left: -21px;
  }

  .bt-icon1 .path2.active:before {
    color: rgb(123, 144, 173);
  }

  .bt-icon1 .path1.active:before {
    color: rgb(123, 144, 173);
  }

  .mark-yuce {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 999;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .yuce-contains {
    width: 615px;
    background-color: #fff;
    border-radius: 4px;
    position: relative;
  }

  .yuce-contains .title {
    line-height: 45px;
    text-align: center;
    height: 45px;
  }

  .yuce-contains .close {
    position: absolute;
    right: 0;
    top: 0;
    width: 45px;
    height: 45px;
    text-align: center;
    line-height: 45px;
  }

  .yuce-orge {
    padding-left: 24px;
    padding-right: 24px;
    background-color: #f2f2f2;
    padding-bottom: 15px;
  }

  .orge-footer {
    padding: 8px 0;
  }

  .select-yuce {
    position: absolute;
    right: 141px;
    top: 0;
    width: 120px;
  }

  .footer-template {
    position: fixed;
    bottom: 10px;
  }

  .center-dy {
    justify-content: center;
    align-items: center;
  }

  .pos-center {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    text-align: center;
  }

  .btn-orgn {
    position: relative;
    z-index: 1;
    width: 100%;
    min-width: 5px;
    max-width: 40px;
    float: right;
    line-height: 40px;
    box-sizing: border-box;
    text-align: right;
    padding-right: 10px;
    display: block;
  }

  .detection {
    width: 160px;
    height: 46px;
    line-height: 46px;
    border-radius: 23px;
    margin: 20px 0;
    display: block;
    background-color: #fff;
    box-shadow: 0px 0px 10px 0px rgba(224, 228, 255, 1);
  }

  /*Typing Loader*/

  .typing_loader {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    -webkit-animation: typing 1s linear infinite alternate;
    -moz-animation: Typing 1s linear infinite alternate;
    -ms-animation: Typing 1s linear infinite alternate;
    animation: typing 1s linear infinite alternate;
    margin: 8px auto;
    position: relative;
    left: -12px;
  }

  @-webkit-keyframes typing {
    0% {
      background-color: rgba(0, 0, 0, 1);
      box-shadow: 12px 0px 0px 0px rgba(0, 0, 0, 0.2), 24px 0px 0px 0px rgba(0, 0, 0, 0.2);
    }
    25% {
      background-color: rgba(0, 0, 0, 0.4);
      box-shadow: 12px 0px 0px 0px rgba(0, 0, 0, 2), 24px 0px 0px 0px rgba(0, 0, 0, 0.2);
    }
    75% {
      background-color: rgba(0, 0, 0, 0.4);
      box-shadow: 12px 0px 0px 0px rgba(0, 0, 0, 0.2), 24px 0px 0px 0px rgba(0, 0, 0, 1);
    }
  }

  @-moz-keyframes typing {
    0% {
      background-color: rgba(0, 0, 0, 1);
      box-shadow: 12px 0px 0px 0px rgba(0, 0, 0, 0.2), 24px 0px 0px 0px rgba(0, 0, 0, 0.2);
    }
    25% {
      background-color: rgba(0, 0, 0, 0.4);
      box-shadow: 12px 0px 0px 0px rgba(0, 0, 0, 2), 24px 0px 0px 0px rgba(0, 0, 0, 0.2);
    }
    75% {
      background-color: rgba(0, 0, 0, 0.4);
      box-shadow: 12px 0px 0px 0px rgba(0, 0, 0, 0.2), 24px 0px 0px 0px rgba(0, 0, 0, 1);
    }
  }

  @keyframes typing {
    0% {
      background-color: rgba(0, 0, 0, 1);
      box-shadow: 12px 0px 0px 0px rgba(0, 0, 0, 0.2), 24px 0px 0px 0px rgba(0, 0, 0, 0.2);
    }
    25% {
      background-color: rgba(0, 0, 0, 0.4);
      box-shadow: 12px 0px 0px 0px rgba(0, 0, 0, 2), 24px 0px 0px 0px rgba(0, 0, 0, 0.2);
    }
    75% {
      background-color: rgba(0, 0, 0, 0.4);
      box-shadow: 12px 0px 0px 0px rgba(0, 0, 0, 0.2), 24px 0px 0px 0px rgba(0, 0, 0, 1);
    }
  }
</style>
